const compileUtil = {
  getVal(vm, val) { // vm实例，val 绑定的属性
    return val.split('.').reduce( (data, currentVal) => {
      return data[currentVal] ? data[currentVal] : currentVal
    }, vm.$data)
  },
  getTextVal(val) {
    return val.replace(/\{\{(.+?)\}\}/g, (...args) => {
      return args[1]
    })
  },
  getModelVal(vm, val, newVal) { // vm实例，val 绑定的属性
    return val.split('.').reduce( (data, currentVal) => {
      if (newVal) {
        data[currentVal] = newVal
      } else {
        data[currentVal] = ' '
      }
     
    }, vm.$data)
  },
  text(...arguments) {
    const [node, val, vm] = arguments
    let value;
    if(val.indexOf('{{') === -1) {
      
      value = this.getVal(vm, val)
      new Watcher(vm, val, (newVal) => {
        this.updater.textUpdater(node, newVal)
      })
     
    } else {
      value = val.replace(/\{\{(.+?)\}\}/g, (...args) => {
        return this.getVal(vm, args[1])
      })

      const attr = this.getTextVal(val)
      new Watcher(vm, attr, (newVal) => {
        this.updater.textUpdater(node, newVal)
      })
    }
    this.updater.textUpdater(node, value)
  },
  html(...arguments) {
    const [node, val, vm] = arguments
    const value = this.getVal(vm, val)
    // 绑定watcher
    new Watcher(vm, val, (newVal) => {
      this.updater.htmlUpdater(node, newVal)
    })
    // 更新数据（数据驱动视图）
    this.updater.htmlUpdater(node, value)
  },
  model(...arguments) {
    const [node, val, vm] = arguments
    const value = this.getVal(vm, val)

    new Watcher(vm, val, (newVal) => {
      this.updater.modelUpdater(node, newVal)
    })
    
    // 视图驱动数据
    node.addEventListener('input', (e) => {
      console.log(e.target.value)
      this.getModelVal(vm, val, e.target.value)
    })

    this.updater.modelUpdater(node, value)
  },
  on(node, val, vm, eventName) {
    let fn = vm.$options.methods && vm.$options.methods[val]
    if (fn) {
      node.addEventListener(eventName, fn.bind(vm), false)
    }
    
  },
  // 更新函数
  updater: {
    textUpdater(node, value) {
      node.textContent = value
    },
    htmlUpdater(node, value) {
      node.innerHTML = value
    },
    modelUpdater(node, value) {
      node.value = value
    }
  }
}

// 编译 
class Compile {
  constructor(el, vm) {
    this.el = this.isElementNode(el) ? el : document.querySelector(el)
    this.vm = vm
    // 1. 创建虚拟DOM(文档碎片对象)，放入内存中会减少页面回流与重绘
    const vDom = this.creatVdom(this.el)
    // 2. 编译
    this.compile(vDom)
    // 3. 挂载
    this.el.appendChild(vDom)
  }
  isElementNode(node) {
    return node.nodeType === 1 ? true : false
  }
  isDirective(attrName) {
    return attrName.startsWith('v-')
  }
  isEventName(attrName) {
    return attrName.startsWith('@')
  }
  creatVdom(el) {
    const dom = document.createDocumentFragment()
    let firstChild
    while(firstChild = el.firstChild) {
      dom.appendChild(firstChild)
    }
    return dom
  }
  compile(dom) {
    const [...nodeList] = dom.childNodes
    nodeList.forEach( node => {
      if (this.isElementNode(node)) {
        // 编译元数
        this.compileElement(node)
      } else {
        //编译文本
        this.compileText(node)
      }
      if (node.childNodes && node.childNodes.length) {
        this.compile(node)
      }
    })
  }
  compileElement(node) {
    let attributes = [...node.attributes]
    attributes.forEach(attr => {
      const {name, value} = attr
      if(this.isDirective(name)) { // 是一个指令v-html......
        const [, directive] = name.split('-')
        const [dirName, eventName] = directive.split(':') // text html model on ...
        // 更新数据 驱动视图
        compileUtil[dirName](node, value, this.vm, eventName)
        // 删除节点上v-指令属性
        node.removeAttribute('v-' + directive)
      } else if (this.isEventName(name)) {
        let [, eventName] = name.split('@')
        compileUtil['on'](node, value, this.vm, eventName)
      }
      
    })
  }
  compileText(node) {
    const content = node.textContent
    if(/\{\{(.+?)\}\}/.test(content)) {
      console.log(content)
      compileUtil['text'](node, content, this.vm)
    }
  }
}

class Qb_Vue {
  constructor(options) {
    this.$options = options
    this.$el = options.el
    this.$data = typeof options.data === 'function' ? options.data() : options.data
    this.title = 'vue'
    if (this.$el) {
      // 1. 实现观察者（劫持监听数据）
      new Observer(this.$data)
      // 2. 指令解析器（编译更新数据）
      new Compile(this.$el, this)
      // 代理
      this.proxyData(this.$data)
    }
  }
  proxyData(data) {
    for( const key in data) {
      Object.defineProperty(this, key, {
        get() {
          return data[key]
        },
        set(newVal) {
          data[key] = newVal
        }
      })
    }
  }
}
/***
 * mvvm原理
 * 1. 9就是一个简单的观察-订阅 的设计模式
 * Observer 观察者，用来观察数据源变化，内部采用Object.defineProperty的getter和setter来实现。
 * Compile 指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
 * Watcher 订阅者， 作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。
 * Dep 消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify 函数，再调用订阅者的 update 方法。
 */